<template>
  <div>
    <a-button @click="chosenClick" v-if="data.length == 0">
      <a-icon type="plus"></a-icon>记录
    </a-button>
    <div class="customFormItemControl" v-if="data.length > 0">
      <a-spin size="small" v-if="initLoading" :spinning="initLoading"> </a-spin>
      <div style="width: 100%; height: auto">
        <div class="byQPiB flexRow mBottom10">
          <div class="flexRow">
            <div class="flex content" style="min-width: 0px"></div>
          </div>
        </div>
        <div
          width="129"
          class="mBottom6"
          v-for="(item, index) in data"
          :key="index"
        >
          <div class="data Hand">
            <div class="operateButton">
              <a-tooltip title="重新选择">
                <span class="oper mRight8" @click="chosenClick"
                  ><a-icon type="swap"
                /></span>
              </a-tooltip>

              <a-tooltip title="删除">
                <span class="oper" @click="chosenDeleteClick"
                  ><a-icon type="delete"></a-icon
                ></span>
              </a-tooltip>
            </div>
            <div class="hynqih" style="padding-bottom: 10px">
              <div class="card">
                <div
                  :title="item[title]"
                  class="title"
                  style="margin-bottom: 8px; font-size: 15px; line-height: 19px"
                >
                  {{ item[title] }}
                </div>
                <div>
                  <div
                    class="content"
                    v-for="column in columns.filter((f) => f.field != title)"
                    :key="column.field"
                  >
                    <div class="label">{{ column.title }}</div>
                    <div class="content isTextControl field">
                      <list-content
                        :row="item"
                        :column="column"
                        :type="convertType(column)"
                        :options="column.options"
                      ></list-content>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 表格数据选择 -->
    <card-chosen
      ref="gridchosen"
      v-if="chosen.visible"
      :visible.sync="chosen.visible"
      :record="record"
      :from="{
        zeroCodeId: worksheet.zeroCodeId,
        key: record.key, //来源控件
        rowId: worksheet.rowId, //来源数据RowId
        rowIds: chosen.rowIds,
      }"
      @ok="chosenOk"
    ></card-chosen>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import cardChosen from "./cardChosen.vue";
import listContent from "@/pages/system/zerocode/run/components/list/content";
import {
  findById,
  businessDataById,
  findCorrelationDefault,
  findCorrelationDefaultField,
} from "@/services/system/zerocode/run/edit";
export default {
  components: { cardChosen, listContent },
  data() {
    return {
      initLoading: false, //初始化是否加载效果
      //选择
      chosen: {
        rowIds: [],
        visible: false,
      },
      columnJson: null,
      data: [],
      columns: [],
      title: "",
    };
  },
  props: ["record", "value", "formValue", "parentDisabled", "worksheet"],
  watch: {},
  computed: {
    ...mapGetters("account", ["zeroCode"]),
  },
  created() {
    this.initColumn();
    this.getDefault();
  },
  methods: {
    closeLoading() {
      this.initLoading = false;
    },
    /**
     * 获取数据
     */
    getDefault() {
      let that = this;
      //编辑并且有值
      if (that.record.options.zeroCodeId) {
        this.initLoading = true;
        var systemZeroCodeData = that.$utils.find(
          this.zeroCode,
          (f) => f.zeroCodeId == that.record.options.zeroCodeId
        );
        if (systemZeroCodeData) {
          setTimeout(() => {
            that.setData(systemZeroCodeData);
          }, 10);
        } else {
          findById(that.record.options.zeroCodeId).then(
            (systemZeroCodeData) => {
              that.setData(systemZeroCodeData.data);
            }
          );
        }
      }
    },

    /**
     *
     */
    setData(systemZeroCodeData) {
      let that = this;
      that.systemZeroCodeData = systemZeroCodeData;
      that.title = JSON.parse(that.systemZeroCodeData.publicJson).config.title;

      //编辑重新加载数据
      switch (that.worksheet.mode) {
        case that.eipZeroCodeWorkSheetMode.edit:
          if (that.value) {
            findCorrelationDefault({
              zeroCodeId: that.worksheet.zeroCodeId,
              key: that.record.key,
              rowId: that.worksheet.rowId,
            }).then((resultTable) => {
              that.setOptions(resultTable);
            });
          } else {
            that.closeLoading();
          }
          break;
        case that.eipZeroCodeWorkSheetMode.button:
          //是否选择的多个
          let button = that.worksheet.from.button;
          if (
            button.form.write ==
            that.eipZeroCodeFormSettingButtonFormWrite.field
          ) {
            findCorrelationDefault({
              zeroCodeId: that.worksheet.zeroCodeId,
              key: that.record.key,
              rowId: that.worksheet.from.rowId,
            }).then((resultTable) => {
              that.setOptions(resultTable);
            });
          }
          //当前记录，填写关联
          else if (
            button.form.write ==
            that.eipZeroCodeFormSettingButtonFormWrite.correlation
          ) {
            businessDataById({
              zeroCodeId: that.record.options.zeroCodeId,
              id: that.worksheet.from.rowId,
            }).then((resultTable) => {
              if (resultTable.data) {
                that.data = that.worksheet.from.rowId;
                that.record.options.disabled = true;
                let data = {
                  RowId: that.worksheet.from.rowId,
                };
                data = resultTable.data;
                that.setOptions({
                  code: resultTable.code,
                  msg: resultTable.msg,
                  data: {
                    data: [data],
                  },
                });
                that.change();
              } else {
                that.closeLoading();
              }
            });
          }
          break;
        case that.eipZeroCodeWorkSheetMode.add:
          //判断是否有来源,从关联表来，直接赋予了默认值
          if (
            that.worksheet.from &&
            that.worksheet.from.zeroCodeId &&
            that.record.options.twoway.is &&
            that.worksheet.from.key == that.record.options.twoway.key
          ) {
            businessDataById({
              zeroCodeId: that.record.options.zeroCodeId,
              id: that.worksheet.from.rowId,
            }).then((resultTable) => {
              that.data = that.worksheet.from.rowId;
              that.record.options.disabled = true;
              //一个新增记录再次关联一个新增
              let data = {
                RowId: that.worksheet.from.rowId,
              };
              if (resultTable.data == null) {
                data[that.title] = "当前记录";
              } else {
                data = resultTable.data;
              }
              that.setOptions({
                code: resultTable.code,
                msg: resultTable.msg,
                data: {
                  data: [data],
                },
              });
              that.change();
            });
          } else {
            switch (that.record.options.defaultValueConfig.type) {
              case that.eipZeroCodeDefaultType.field:
                findCorrelationDefaultField({
                  zeroCodeId: that.worksheet.zeroCodeId,
                  key: that.record.key,
                }).then((resultTable) => {
                  that.setOptions(resultTable);
                });
                break;
              default:
                that.closeLoading();
                break;
            }
          }
          break;
        default:
          that.closeLoading();
          break;
      }
    },

    /**
     * 格式化
     */
    convertCorrelation(value) {
      if (value) {
        var returnValue = [];
        var parseValue = JSON.parse(value);
        parseValue.forEach((item) => {
          returnValue.push({
            label: item.Title,
            value: item.RowId,
            color: item.Color,
          });
        });
        return returnValue;
      } else {
        return [];
      }
    },

    /**
     * 赋予值
     */
    setOptions(resultTable) {
      this.data = resultTable.data.data;
    },

    /**
     *
     */
    chosenClick() {
      this.chosen.rowIds = this.data.map((m) => m.RowId);
      this.chosen.visible = true;
    },

    /**
     *
     */
    chosenDeleteClick() {
      this.data = [];
      this.$emit("change", undefined);
      this.closeLoading();
    },

    /**
     * 改变事件
     */
    handleInput() {
      if (
        this.record.options.type ==
        this.eipZeroCodeControlCorrelationType.multiple
      ) {
        this.$emit(
          "change",
          this.data.map((m) => m.RowId)
        );
      } else {
        this.$emit("change", this.data.map((m) => m.RowId).join(","));
      }
      this.closeLoading();
    },

    /**
     * 转换类型
     * @param row
     * @param column
     */
    convertType(column) {
      var columnFind = this.$utils.find(
        this.columnJson,
        (f) => f.key == column.field
      );
      if (columnFind) {
        return columnFind.type;
      } else {
        switch (column.field) {
          case "CreateTime":
          case "UpdateTime":
            return "systime";
          case "CreateUser":
          case "UpdateUser":
            return "sysuser";
        }
      }
    },
    /**
     * 初始化列
     */
    async initColumn() {
      let that = this;
      let columns = [];
      var systemZeroCodeData = that.$utils.find(
        this.zeroCode,
        (f) => f.zeroCodeId == this.record.options.zeroCodeId
      );
      if (!systemZeroCodeData) {
        systemZeroCodeData = (await findById(this.record.options.zeroCodeId))
          .data;
      }
      that.title = JSON.parse(systemZeroCodeData.publicJson).config.title;
      that.columnJson = JSON.parse(systemZeroCodeData.columnJson);
      that.columnJson
        .filter((f) => that.record.options.columns.includes(f.key))
        .forEach((element) => {
          let column = {
            options: element,
            field: element.key,
            title: element.label,
          };
          columns.push(column);
        });

      that.columns = columns;
    },

    /**
     *
     * @param data
     */
    chosenOk(data) {
      this.data = data;
      this.handleInput();
    },
  },
};
</script>
<style lang="less" scoped>
.customFieldsContainer .customFormItemControl {
  box-sizing: border-box;
  flex: 1;
  min-width: 0;
  position: relative;
  width: 100%;
}

.field {
  padding-top: 6px;
  font-size: 13px !important;
  line-height: 16px;
  font-weight: bold !important;
}

.byQPiB:has(.content:empty) {
  margin-top: -10px;
}
.flexRow {
  display: flex;
  min-width: 0;
}
.mBottom10 {
  margin-bottom: 10px !important;
}
.mBottom6 {
  margin-bottom: 6px !important;
}
.customFieldsContainer {
  background: #fff;
  color: #151515;
  line-height: normal;
  margin: 0 -12px;
}
.data {
  display: inline-flex;
  position: relative;
  border-radius: 3px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(234, 234, 234);

  border-color: rgb(234, 234, 234);
  width: 100%;
}
.data:last-child {
  margin-bottom: 0px;
}
.data .operateButton {
  position: absolute;
  display: flex;
  top: -11px;
  right: -11px;
  visibility: hidden;
  z-index: 2;
}
.oper {
  cursor: pointer;
  width: 22px;
  height: 22px;
  font-size: 14px;
  border-radius: 22px;
  background: rgb(255, 255, 255);
  color: rgb(117, 117, 117);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px 1px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  border: 1px solid rgb(245, 245, 245);
}
.hynqih {
  display: flex;
  flex: 1 1 0%;
  padding: 12px 16px;
  overflow: hidden;
  flex-direction: column;
}
.card {
  flex: 1 1 0%;
  overflow: hidden;
}
.title {
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  color: rgb(21, 21, 21);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.content {
  display: flex;
  flex-direction: row;
  font-size: 12px;
  padding-right: 14px;
}
.label {
  font-size: 13px;
  max-width: 150px;
  min-width: 80px;
  color: rgb(117, 117, 117);
  line-height: 16px;
  margin: 6px 0px;
  padding-right: 1em;
}
.content .content:not(.isTextControl) {
  max-width: 100%;
}

.content .content {
  flex: 1 1 0%;
  min-height: 28px;
  overflow: hidden;
  white-space: pre;
}
.iYBoWS {
  display: inline-block;
  width: 22px;
  height: 6px;
  background: rgb(234, 234, 234);
  border-radius: 3px;
}
.data.Hand:hover {
  box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 12px 0px,
    rgba(0, 0, 0, 0.12) 0px 0px 2px 0px;
}
.data:hover .operateButton {
  visibility: visible;
}

.mRight8 {
  margin-right: 8px !important;
}

.eip-button-number {
  background-color: rgba(0, 100, 240, 0.08);
  border-radius: 3px;
  padding: 0 10px;
}
</style>
